[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useEffect, useState } from "react" import { motion } from "framer-motion" import { Bell, ChevronRight, Home, BarChart3, MessageSquare, Building, MoreHorizontal, Eye, EyeOff, User, Sparkles, Equal, } from "lucide-react" import Image from "next/image" export default function Dashboard() { const [isLoaded, setIsLoaded] = useState(false) const [isDarkMode, setIsDarkMode] = useState(true) const [isHidden, setIsHidden] = useState(false) useEffect(() => { setIsLoaded(true) }, []) const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.3, }, }, } const item = { hidden: { y: 20, opacity: 0 }, show: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 24 } }, } const shimmer = { initial: { opacity: 0.3 }, animate: { opacity: 1 }, transition: { repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", duration: 1.5 }, } return (

{/* Top Navigation Bar */}

setIsDarkMode(!isDarkMode)} className="w-4 h-4 rounded-full bg-white cursor-pointer" />

Premium Member

{/* Main Content */}

{/* Left Column */} {/* Accounts Section */}

Accounts

All Banks

{/* Balance Card */}

{isHidden ? "••••••••" : "$34,280.56"}

17:05 15 Nov 2024

↻

Premium Account

Remaining Limit: $1376.98

Details

→

{/* Hide Button */} setIsHidden(!isHidden)} className="flex items-center gap-1 text-sm text-gray-500" > {isHidden ? "Show" : "Hide"} {isHidden ? : } {/* Sim Whippered Card */}

SIM Whippered

{/* Bank Account Card */}

Bank Account

$ 16,365.50

Gold Assets

44.70 Oz

{/* Profit Section */}

Profit

Exchanges

Weekly

↓

All Profits

64.89%

↑

Profit

$ 6,365.50

Equity

$ 2,853.30

Margin

$ 22,363

{/* Right Column */} {/* Transaction Section */}

Transaction

Limit

{/* Transfer Gold Coin Card */}

Transfer

Gold Coin

Amount: Oz

Kilos

5 . 3

Transfer Coin

Market

{/* Suggested Locals */}

Suggested Locals

9/20

Christina Breun

Marketing

Transfer {/* Transaction History */}

Transaction History

→

12.70 Oz

0x9714...a1e67

16.40 Oz

0x4813...a1e5f

{/* Settings and Add Buttons */} Settings + Add

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Premium Gold Banking Dashboard", description: "A premium banking dashboard for gold transactions and investments", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 47.9 95.8% 53.1%; --primary-foreground: 26 83.3% 14.1%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 47.9 95.8% 53.1%; --radius: 0.75rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 47.9 95.8% 53.1%; --primary-foreground: 26 83.3% 14.1%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 47.9 95.8% 53.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], }

About

Tags

Share

About

Tags

Share

More Templates Like This